<template>
	<div
	  class="diy_edit comment_edits page_i_want_to_customize"
	  id="i_want_to_customize_edit"
	>
	  <el-form
		:model="form"
		ref="ruleFormRef"
		:rules="rules"
		label-width="auto"
		class="edit_comment_form"
		size="large"
	  >
	    <el-form-item label="被回复人" prop="nickname">
			{{reply_obj.nickname}}
		</el-form-item>
		<el-form-item label="被回复内容" prop="reply_to_id">
			{{reply_obj.content}}
		</el-form-item>
		<el-form-item label="头像" prop="avatar" v-if="!query.reply_to_id"> 
		  <el-upload
			class="avatar-uploader"
			drag
			accept="image/gif, image/jpeg, image/png, image/jpg"
			action=""
			:http-request="uploadimg"
			:show-file-list="false"
		  >
			<img
			  v-if="form.avatar"
			  :src="$fullUrl($banseUrl,form.avatar)"
			  class="avatar"
			/>
			<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		  </el-upload>
		</el-form-item>
		<el-form-item label="昵称" prop="nickname" v-if="!query.reply_to_id"> 
		  <el-input v-model="form.nickname"  placeholder="请输入昵称"/>
		</el-form-item>
		<el-form-item label="正文" prop="content" v-if="!query.reply_to_id">
			<form_editor
                        class="editor el_form_editor_warp"
                        :form="form"
                        @blur_comment="blur_comment"
                        @update_comment="update_comment"
                        :publish_flag='false'
                      />
		</el-form-item>
		<div class="footer">
		  <!-- <el-button type="primary" @click="Onsubmit" size="large"
			>提交留言</el-button
		  > -->
		  <el-button @click="cancel()" size="large">取消</el-button>
		</div>
	  </el-form>
	</div>
  </template>
  
  <script setup>
  // import mixin from "@/mixins/page.js";
  import { ref,onMounted } from "vue";
  import { $post, $get } from "@/api/Api.js";
  import storageHelper from "@/libs/StorageHelper";
  import { useStore } from "vuex";
  import { useRouter } from "vue-router";
  import {
	$get_auth,
	func,
	paramsFun,
	$fullUrl,
	formatDate,
	$banseUrl,
	$check_action,
	$getUrlParams,
	filterSensitiveWords,
  } from "@/utils/utils.js";
  let router = useRouter();
  let store = useStore();
  let token = storageHelper.getToken() || null;
  let UserInfo = storageHelper.getUserInfo();
  // let avatar = storageHelper.getUserInfo().avatar;
  // let nickname = storageHelper.getUserInfo().nickname;
  let comment_id = $getUrlParams().comment_id;
  let reply_to_id = $getUrlParams().reply_to_id||0;
  // let comment_id = location.search.substring(1);

  let url_add = ref("/api/comment/add");
  let url_set = ref("/api/comment/set");
  let url_get_obj = ref("/api/comment/get_obj");
  let url_upload = ref("/api/comment/upload");
  let list_comment_type= ref([])
  let field= ref('comment_id')
  let reply_obj = ref({
	nickname: "",
	content: ""
  });
  let query = ref({
	comment_id: comment_id,
	reply_to_id: reply_to_id
  });
  let form = ref({
	comment_id: 0,
	avatar: "",
	content: "",
	reply_to_id: 0
  });
  
  let ruleFormRef = ref(null);
  let rules = ref({
	title: [
	  {
		required: true,
		message: "标题不能为空",
		trigger: "blur",
	  },
	],
	nickname: [
	  {
		required: true,
		message: "昵称不能为空",
		trigger: "blur",
	  },
	],
  });
 // 富文本编辑器更新
 let update_comment=(obj) => {
  form.value.content=obj
};
let blur_comment=(obj) => {
  form.value.content=obj
};
  // 上传文件
  let uploadimg = (param) => {
	uploadFile(param.file, "img");
  };
  /**
   * 上传文件
   * @param {Object} file 文件对象
   * @param {key} 保存键名
   */
  const uploadFile = (file, key = "img") => {
	var formobj = new FormData(); // FormData 对象
	formobj.append("file", file); // 文件对象
	$upload(url_upload.value, formobj, function (json) {
	  if (json.result) {
		form.value[key] = json.result.url;
	  } else {
		ElMessage.error("上传失败！");
	  }
	});
  };
  /**
   * 上传文件
   * @param {String} url 请求地址
   * @param {Object} body 请求参数
   * @param {Funciton} func 回调函数，可以为空，为空则采用await返回值
   * @return {Object} 返回请求结果
   */
  let $upload = async (url, body, func) => {
	url = url.replace("~/", $banseUrl);
  
	if (func) {
	  // 如果回调函数存在, 则采用异步
	  $post(url, body, {
		headers: {
		  "x-auth-token": token,
		  "Content-Type": "multipart/form-data",
		},
	  })
		.then((res) => {
		  func(res);
		})
		.catch((res) => {
		  func(res);
		});
	} else {
	  // 否则采用同步
	  var res = await $post(url, body, {
		headers: {
		  "x-auth-token": token,
		  "Content-Type": "multipart/form-data",
		},
	  });
	  return res;
	}
  };
  // 点击取消
  let cancel = () => {
	router.go(-1);
  }
  // 获取被回复内容
  let get_comment_obj = async () => {
	var list = await $get("/api/comment/get_obj?comment_id="+comment_id);
	reply_obj.value = list.result.obj;
	form.value.reply_to_id = query.value.reply_to_id || 0;
					form.value.avatar = reply_obj.value.avatar;
					form.value.nickname = reply_obj.value.nickname;
					form.value.content=reply_obj.value.content
					console.log(reply_obj.value.content)
					console.log(form.value.content)
  };
//   let get_obj_before=(param)=>{
// 				if(!param.source_id){
// 					var form = form.value;
// 					//var user =UserInfo;
					
// 				}
// 				return param;
// 			}
  onMounted(() => {
	console.log(reply_to_id)
	// get_comment_type();
	get_comment_obj()
	
  });
  </script>
  
  <style scoped lang="less">
  .diy_edit {
	width: 100%;
	.edit_comment_form {
	  max-width: 60%;
	  margin: 90px auto;
	  .fn {
		width: 100%;
	  }
	}
	img{
		width: 100px;
		height: 100px;
	}
	.edit_list_comment_sell {
	  width: 80%;
	  margin: 90px auto;
	}
	.footer {
	  text-align: center;
	}
  }
  </style>
  